<!doctype html><html lang="en">
 <head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="#3c790a" name="theme-color">
  <title>Quirks Mode Standard</title>
  <link crossorigin href="https://resources.whatwg.org/spec.css" rel="stylesheet">
  <link crossorigin href="https://resources.whatwg.org/standard.css" rel="stylesheet">
  <link crossorigin href="https://resources.whatwg.org/standard-shared-with-dev.css" rel="stylesheet">
  <link crossorigin href="https://resources.whatwg.org/logo-quirks.svg" rel="icon">
<script async crossorigin src="https://resources.whatwg.org/file-issue.js"></script>
<script async crossorigin src="https://resources.whatwg.org/commit-snapshot-shortcut-key.js"></script>
<style>
 .logo { position:absolute; top:1em; right:1em; width:106px; height:106px; border:1px outset gray; margin-top:-4px; margin-right:-4px }
 div.head .logo > img { top:2px; right:2px; border:1px inset gray }
 @media (max-width: 767px) {
  .logo { width:calc(4em + 6px); height:calc(4em + 6px) }
 }
</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
 <body class="h-entry status-LS">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://whatwg.org/"> <img alt="WHATWG" crossorigin height="100" src="https://resources.whatwg.org/logo-quirks.svg"> </a> </p>
   <hgroup>
    <h1 class="p-name no-ref" id="title">Quirks Mode</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard — Last Updated <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   </hgroup>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>Participate:
     <dd><a href="https://github.com/whatwg/quirks">GitHub whatwg/quirks</a> (<a href="https://github.com/whatwg/quirks/issues/new">new issue</a>, <a href="https://github.com/whatwg/quirks/issues">open issues</a>)
     <dd><a href="https://wiki.whatwg.org/wiki/IRC">IRC: #whatwg on Freenode</a>
     <dt>Commits:
     <dd><a href="https://github.com/whatwg/quirks/commits">GitHub whatwg/quirks/commits</a>
     <dd>[SNAPSHOT-LINK]
     <dd><a href="https://twitter.com/quirksstandard">@quirksstandard</a>
     <dt>Tests:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/quirks">web-platform-tests quirks/</a> (<a href="https://github.com/web-platform-tests/wpt/labels/quirks">ongoing work</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Quirks Mode defines quirks in CSS and Selectors that are necessary to support for Web browsers for compatibility with the Web.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#history"><span class="secno">1.1</span> <span class="content">History</span></a>
      <li><a href="#goals"><span class="secno">1.2</span> <span class="content">Goals</span></a>
     </ol>
    <li>
     <a href="#common-infrastructure"><span class="secno">2</span> <span class="content">Common infrastructure</span></a>
     <ol class="toc">
      <li><a href="#conformance"><span class="secno">2.1</span> <span class="content">Conformance</span></a>
      <li><a href="#terminology"><span class="secno">2.2</span> <span class="content">Terminology</span></a>
     </ol>
    <li>
     <a href="#css"><span class="secno">3</span> <span class="content">CSS</span></a>
     <ol class="toc">
      <li><a href="#the-hashless-hex-color-quirk"><span class="secno">3.1</span> <span class="content">The hashless hex color quirk</span></a>
      <li><a href="#the-unitless-length-quirk"><span class="secno">3.2</span> <span class="content">The unitless length quirk</span></a>
      <li><a href="#the-line-height-calculation-quirk"><span class="secno">3.3</span> <span class="content">The line height calculation quirk</span></a>
      <li><a href="#the-blocks-ignore-line-height-quirk"><span class="secno">3.4</span> <span class="content">The blocks ignore line-height quirk</span></a>
      <li><a href="#the-percentage-height-calculation-quirk"><span class="secno">3.5</span> <span class="content">The percentage height calculation
quirk</span></a>
      <li><a href="#the-html-element-fills-the-viewport-quirk"><span class="secno">3.6</span> <span class="content">The <code><span>html</span></code> element fills the viewport
quirk</span></a>
      <li><a href="#the-body-element-fills-the-html-element-quirk"><span class="secno">3.7</span> <span class="content">The <code><span>body</span></code> element fills the <code><span>html</span></code> element
quirk</span></a>
      <li><a href="#the-table-cell-width-calculation-quirk"><span class="secno">3.8</span> <span class="content">The table cell width calculation quirk</span></a>
      <li><a href="#the-table-cell-nowrap-minimum-width-calculation-quirk"><span class="secno">3.9</span> <span class="content">The table cell nowrap minimum width
calculation quirk</span></a>
      <li><a href="#the-collapsing-table-quirk"><span class="secno">3.10</span> <span class="content">The collapsing table quirk</span></a>
      <li><a href="#the-text-decoration-doesnt-propagate-into-tables-quirk"><span class="secno">3.11</span> <span class="content">The text decoration doesn’t propagate
into tables quirk</span></a>
      <li><a href="#the-tables-inherit-color-from-body-quirk"><span class="secno">3.12</span> <span class="content">The tables inherit color from body
quirk</span></a>
      <li><a href="#the-table-cell-height-box-sizing-quirk"><span class="secno">3.13</span> <span class="content">The table cell height box sizing quirk</span></a>
     </ol>
    <li>
     <a href="#selectors"><span class="secno">4</span> <span class="content">Selectors</span></a>
     <ol class="toc">
      <li><a href="#the-active-and-hover-quirk"><span class="secno">4.1</span> <span class="content">The :active and :hover quirk</span></a>
     </ol>
    <li><a href="#security-privacy"><span class="secno"></span> <span class="content">Security and Privacy Considerations</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <h3 class="heading settled" data-level="1.1" id="history"><span class="secno">1.1. </span><span class="content">History</span><a class="self-link" href="#history"></a></h3>
   <p>Browsers have several rendering modes to render HTML documents. The reason for this is basically
a historical accident. The CSS specification was incompatible with the behavior of existing browsers
which existing Web content relied on. In order to comply with the specification while not breaking
existing content, browsers introduced a new rendering mode (no-quirks mode). Some browsers still had
the shrink-wrapping behavior for images in table cells in their no-quirks mode, and sites started
relying on that, so browsers that implemented the specification’s behavior introduced a third mode
(limited-quirks mode). In hindsight, it would have been better to make the default CSS behavior be
compatible with what the existing content relied on and providing opt-ins to different behavior. The
different modes have since gained a few differences outside of CSS. </p>
   <h3 class="heading settled" data-level="1.2" id="goals"><span class="secno">1.2. </span><span class="content">Goals</span><a class="self-link" href="#goals"></a></h3>
   <ul>
    <li>
     <p>Create a specification for rendering old (or indeed new, if they happen to have a particular
  pragma) HTML documents. </p>
     <p class="note" role="note">The HTML specification <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-initial-insertion-mode">defines</a> when a document is set to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks">quirks mode</a>, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-limited-quirks" id="ref-for-concept-document-limited-quirks">limited-quirks mode</a> or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-no-quirks" id="ref-for-concept-document-no-quirks">no-quirks mode</a>. <a data-link-type="biblio" href="#biblio-html">[HTML]</a> </p>
    <li>
     <p>Remove quirks from implementations that are not needed for Web compatibility. </p>
     <p class="example" id="example-removed-quirks"><a class="self-link" href="#example-removed-quirks"></a>For example, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=648331">Gecko has removed a quirk about list
  item bullet size</a>, and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=369979">Chromium has removed a quirk
  where display was forced to table or inline-table on <code>table</code> elements</a>.</p>
    <li>
     <p>Get interoperability on quirks that <em>are</em> needed for Web compatibility. </p>
     <p class="example" id="example-interop-quirks"><a class="self-link" href="#example-interop-quirks"></a>For example, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">Gecko aligned their implementation of
  the :active and :hover quirk</a> with this specification and thereby achieved closer
  interoperability with other browsers. </p>
    <li>
     <p>Where possible, limit quirks to a fixed set of legacy features so they don’t propagate into
  new features. </p>
     <p class="example" id="example-limit-quirks"><a class="self-link" href="#example-limit-quirks"></a>For example, <a data-link-type="dfn" href="#quirky-color" id="ref-for-quirky-color">quirky colors</a> are limited to a fixed
  set of CSS properties so that they do not apply in SVG features that also accept colors, or in <a href="https://bugs.webkit.org/show_bug.cgi?id=153730">CSS gradients where the grammar could
  otherwise become ambiguous</a>. </p>
   </ul>
   <p class="note" role="note">This specification does not enumerate all quirks that currently exist in browsers. A
number of quirks are specified in HTML, DOM, CSSOM and CSSOM View. <a data-link-type="biblio" href="#biblio-html">[HTML]</a> <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a> If a quirk is not specified anywhere, it is probably due to the second bullet point
above. </p>
   <h2 class="heading settled" data-level="2" id="common-infrastructure"><span class="secno">2. </span><span class="content">Common infrastructure</span><a class="self-link" href="#common-infrastructure"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="conformance"><span class="secno">2.1. </span><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h3>
   <p>All diagrams, examples, and notes in this specification are non-normative, as are all sections
explicitly marked non-normative. Everything else in this specification is normative. </p>
   <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT
RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this specification are to be
interpreted as described in RFC2119. For readability, these words do not appear in all uppercase
letters in this specification. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <h3 class="heading settled" data-level="2.2" id="terminology"><span class="secno">2.2. </span><span class="content">Terminology</span><a class="self-link" href="#terminology"></a></h3>
   <p>When this specification refers to a "<code><var>foo</var></code> element", it means an element with the
local name <var>foo</var> and having the namespace <code>http://www.w3.org/1999/xhtml</code>. </p>
   <p>When this specification refers to a "<code><var>foo</var></code> attribute", it means an attribute with
the local name <var>foo</var> and having no namespace. </p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="documents-body-element">document’s body element</dfn> is the first <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child">child</a> of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element">document element</a> that is a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> element, if there is one, and the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element①">document element</a> is an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element" id="ref-for-the-html-element">html</a></code> element. Otherwise it is null. </p>
   <p class="note" role="note">The <a data-link-type="dfn" href="#documents-body-element" id="ref-for-documents-body-element">document’s body element</a> is different from HTML’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2">the body
element</a>, since the latter can be a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset" id="ref-for-frameset">frameset</a></code> element. </p>
   <h2 class="heading settled" data-level="3" id="css"><span class="secno">3. </span><span class="content">CSS</span><a class="self-link" href="#css"></a></h2>
   <h3 class="heading settled algorithm" data-algorithm="The hashless hex color quirk" data-level="3.1" id="the-hashless-hex-color-quirk"><span class="secno">3.1. </span><span class="content">The hashless hex color quirk</span><a class="self-link" href="#the-hashless-hex-color-quirk"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="quirky color" id="quirky-color">Quirky colors</dfn> are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="quirky-color-value">&lt;quirky-color></dfn>. A <a data-link-type="dfn" href="#quirky-color" id="ref-for-quirky-color①">quirky color</a> corresponds to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token">&lt;number-token></a>, a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token">&lt;dimension-token></a> or an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token">&lt;ident-token></a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value">component value</a> in the syntax.
The value of a <a data-link-type="dfn" href="#quirky-color" id="ref-for-quirky-color②">quirky color</a> is obtained from the possible <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value①">component values</a> using the
following algorithm, aborting on the first step that returns a value: </p>
   <ol>
    <li>
     <p>Let <var>cv</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value②">component value</a>. </p>
    <li>
     <p>If <var>cv</var> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token①">&lt;number-token></a> or a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token①">&lt;dimension-token></a>, follow these substeps: </p>
     <ol>
      <li>
       <p>If <var>cv</var>’s type flag is not "integer", return an error. </p>
       <p class="note" role="note">This means that values that happen to use scientific notation, e.g., <code>5e5e5e</code>, will fail to parse. </p>
      <li>
       <p>If <var>cv</var>’s value is less than zero, return an error. </p>
      <li>
       <p>Let <var>serialization</var> be the serialization of <var>cv</var>’s value, as a base-ten integer using
   digits 0-9 (U+0030 to U+0039) in the shortest form possible. </p>
      <li>
       <p>If <var>cv</var> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token②">&lt;dimension-token></a>, append the unit to <var>serialization</var>. </p>
      <li>
       <p>If <var>serialization</var> consists of fewer than six characters, prepend zeros (U+0030) so that
   it becomes six characters. </p>
     </ol>
    <li>
     <p>Otherwise, <var>cv</var> is an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token①">&lt;ident-token></a>; let <var>serialization</var> be <var>cv</var>’s value. </p>
    <li>
     <p>If <var>serialization</var> does not consist of three or six characters, return an error. </p>
    <li>
     <p>If <var>serialization</var> contains any characters not in the range [0-9A-Fa-f] (U+0030 to U+0039,
 U+0041 to U+0046, U+0061 to U+0066), return an error. </p>
    <li>
     <p>Return the concatenation of "<code>#</code>" (U+0023) and <var>serialization</var>. </p>
   </ol>
   <p>If the value of a <a data-link-type="dfn" href="#quirky-color" id="ref-for-quirky-color③">quirky color</a> is an error, it is an <a data-link-type="dfn" href="https://drafts.csswg.org/css2/conform.html#illegal" id="ref-for-illegal">illegal</a> value.
Otherwise, the value of a <a data-link-type="dfn" href="#quirky-color" id="ref-for-quirky-color④">quirky color</a> must be interpreted as an RGB value in hexadecimal
notation using the same rules as for <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a>. </p>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①">quirks mode</a>, the following properties must have
their "Value" grammar changed by replacing <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> with: </p>
<pre class="prod">[ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color②" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="#quirky-color-value" id="ref-for-quirky-color-value">&lt;quirky-color></a> ]
</pre>
   <ul class="brief">
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color">background-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> 
   </ul>
   <p>Any property not listed above must not support <a class="production css" data-link-type="type" href="#quirky-color-value" id="ref-for-quirky-color-value①">&lt;quirky-color></a> even if it references one of the
above properties in its "Value" grammar. </p>
   <p>This quirk must apply inside an <a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports">@supports</a> at-rule. </p>
   <p>The <a class="production css" data-link-type="type" href="#quirky-color-value" id="ref-for-quirky-color-value②">&lt;quirky-color></a> value must not be supported in arguments to CSS expressions, and must not be
supported in the <code><a class="idl-code" data-link-type="method" href="https://drafts.csswg.org/css-conditional-3/#dom-css-supports" id="ref-for-dom-css-supports">supports()</a></code> static
method of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#css" id="ref-for-css">CSS</a></code> interface.</p>
   <h3 class="heading settled" data-level="3.2" id="the-unitless-length-quirk"><span class="secno">3.2. </span><span class="content">The unitless length quirk</span><a class="self-link" href="#the-unitless-length-quirk"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="quirky length" id="quirky-length">Quirky lengths</dfn> are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="quirky-length-value">&lt;quirky-length></dfn>. A <a data-link-type="dfn" href="#quirky-length" id="ref-for-quirky-length">quirky length</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#number" id="ref-for-number">number</a> and
corresponds to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token②">&lt;number-token></a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value③">component value</a> in the syntax. The value of a <a data-link-type="dfn" href="#quirky-length" id="ref-for-quirky-length①">quirky
length</a> is obtained from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#component-value" id="ref-for-component-value④">component value</a>’s value. </p>
   <p>The value of a <a data-link-type="dfn" href="#quirky-length" id="ref-for-quirky-length②">quirky length</a> must be interpreted as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> where the unit is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px">px</a>. </p>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks②">quirks mode</a>, the following properties must have
their "Value" grammar changed by replacing <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> with: </p>
<pre class="prod">[ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production" data-link-type="type" href="#quirky-length-value" id="ref-for-quirky-length-value">&lt;quirky-length></a> ]
</pre>
   <ul class="brief">
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-tables-3/#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip" id="ref-for-propdef-clip">clip</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin">margin</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height">max-height</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width">max-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height" id="ref-for-propdef-min-height">min-height</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width" id="ref-for-propdef-min-width">min-width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding" id="ref-for-propdef-padding">padding</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">width</a> 
    <li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-word-spacing" id="ref-for-propdef-word-spacing">word-spacing</a> 
   </ul>
   <p>Any property not listed above must not support <a class="production css" data-link-type="type" href="#quirky-length-value" id="ref-for-quirky-length-value①">&lt;quirky-length></a> even if it references one of the
above properties in its "Value" grammar. </p>
   <p>This quirk must apply inside an <a class="css" data-link-type="at-rule" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports①">@supports</a> at-rule. </p>
   <p>The <a class="production css" data-link-type="type" href="#quirky-length-value" id="ref-for-quirky-length-value②">&lt;quirky-length></a> value must not be supported in arguments to CSS expressions other than the <a data-link-type="functionish" href="https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect" id="ref-for-funcdef-clip-rect">rect()</a> expression, and must not be supported in the <code><a class="idl-code" data-link-type="method" href="https://drafts.csswg.org/css-conditional-3/#dom-css-supports" id="ref-for-dom-css-supports①">supports()</a></code> static method of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#css" id="ref-for-css①">CSS</a></code> interface.</p>
   <h3 class="heading settled algorithm" data-algorithm="The line height calculation quirk" data-level="3.3" id="the-line-height-calculation-quirk"><span class="secno">3.3. </span><span class="content">The line height calculation quirk</span><a class="self-link" href="#the-line-height-calculation-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks③">quirks mode</a> and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-limited-quirks" id="ref-for-concept-document-limited-quirks①">limited-quirks mode</a>, an inline box that
matches the following conditions, must, for the purpose of line height calculation, act as if the
box had a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height">line-height</a> of zero. </p>
   <ul>
    <li>
     <p>The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width①">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width①">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top①">padding-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom①">padding-bottom</a> properties
 have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used value</a> of zero and the box has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing mode</a>, or the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width①">border-right-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width①">border-left-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-right" id="ref-for-propdef-padding-right①">padding-right</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-left" id="ref-for-propdef-padding-left①">padding-left</a> properties have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value①">used value</a> of zero and the box has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#horizontal-writing-mode" id="ref-for-horizontal-writing-mode">horizontal writing mode</a>. </p>
    <li>
     <p>It either contains no text or it contains only collapsed whitespace. </p>
   </ul>
   <h3 class="heading settled" data-level="3.4" id="the-blocks-ignore-line-height-quirk"><span class="secno">3.4. </span><span class="content">The blocks ignore line-height quirk</span><a class="self-link" href="#the-blocks-ignore-line-height-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks④">quirks mode</a> and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-limited-quirks" id="ref-for-concept-document-limited-quirks②">limited-quirks mode</a>, for a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/visuren.html#block-container-element" id="ref-for-block-container-element">block container
element</a> whose content is composed of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level">inline-level</a> elements, the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> must be ignored for the purpose of calculating the minimal height of line boxes within the element. </p>
   <p class="note" role="note">This means that the "strut" is not created.</p>
   <h3 class="heading settled algorithm" data-algorithm="The percentage height calculation
quirk" data-level="3.5" id="the-percentage-height-calculation-quirk"><span class="secno">3.5. </span><span class="content">The percentage height calculation
quirk</span><a class="self-link" href="#the-percentage-height-calculation-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑤">quirks mode</a>, for the purpose of calculating the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①">height</a> of an element <var>element</var>, if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a> property of <var>element</var> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-relative" id="ref-for-valdef-position-relative">relative</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static">static</a>, the specified value for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height②">height</a> property of <var>element</var> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a>, and <var>element</var> does not have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> property that is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-row" id="ref-for-valdef-display-table-row">table-row</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-row-group" id="ref-for-valdef-display-table-row-group">table-row-group</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-header-group" id="ref-for-valdef-display-table-header-group">table-header-group</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-footer-group" id="ref-for-valdef-display-table-footer-group">table-footer-group</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-cell" id="ref-for-valdef-display-table-cell">table-cell</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-caption" id="ref-for-valdef-display-table-caption">table-caption</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> of <var>element</var> must be calculated using the following algorithm, aborting on
the first step that returns a value: </p>
   <ol>
    <li>
     <p>Let <var>element</var> be the nearest ancestor <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> of <var>element</var>, if there is
 one. Otherwise, return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>. </p>
    <li>
     <p>If <var>element</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> property that is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-cell" id="ref-for-valdef-display-table-cell①">table-cell</a>, then return a UA-defined value. </p>
    <li>
     <p>If <var>element</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value③">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height③">height</a> property that is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a>, then return <var>element</var>. </p>
    <li>
     <p>If <var>element</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value④">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position①">position</a> property that is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-absolute" id="ref-for-valdef-position-absolute">absolute</a>, or if <var>element</var> is a not a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container">block container</a> or a <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box">table wrapper box</a>, then return <var>element</var>. </p>
    <li>
     <p>Jump to the first step. </p>
   </ol>
   <p class="note" role="note">It is at the time or writing undefined how percentage heights inside tables work in
CSS. This specification does not try to specify what to use as the containing block for calculating
percentage heights in tables. Godspeed! </p>
   <p class="big-issue">This quirk needs to take writing modes into account.</p>
   <h3 class="heading settled algorithm" data-algorithm="The html element fills the viewport
quirk" data-level="3.6" id="the-html-element-fills-the-viewport-quirk"><span class="secno">3.6. </span><span class="content">The <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element" id="ref-for-the-html-element①">html</a></code> element fills the viewport
quirk</span><a class="self-link" href="#the-html-element-fills-the-viewport-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑥">quirks mode</a>, if the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element②">document element</a> <var>element</var> matches the
following conditions: </p>
   <ul>
    <li>
     <p><var>element</var> is an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element" id="ref-for-the-html-element②">html</a></code> element. </p>
    <li>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑤">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①">width</a> property of <var>element</var> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a> and <var>element</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode①">vertical writing mode</a>, or the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑥">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height④">height</a> property
 of <var>element</var> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a> and <var>element</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#horizontal-writing-mode" id="ref-for-horizontal-writing-mode①">horizontal writing mode</a>. <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]</a> </p>
   </ul>
   <p>...then <var>element</var> must have its <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#border-edge" id="ref-for-border-edge">border box</a> size in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a> set
using the following algorithm: </p>
   <ol>
    <li>
     <p>Let <var>margins</var> be sum of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value②">used values</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right①">margin-right</a> properties of <var>element</var> if <var>element</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode②">vertical writing mode</a>, otherwise let <var>margins</var> be
 the sum of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value③">used values</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top①">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a> properties of <var>element</var>. </p>
    <li>
     <p>Let <var>size</var> be the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block①">initial containing block</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction①">block flow
 direction</a> minus <var>margins</var>. </p>
    <li>
     <p>Return the bigger value of <var>size</var> and the normal <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#border-edge" id="ref-for-border-edge①">border box</a> size the element would
 have according to the CSS specification. </p>
   </ol>
   <h3 class="heading settled" data-level="3.7" id="the-body-element-fills-the-html-element-quirk"><span class="secno">3.7. </span><span class="content">The <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element①">body</a></code> element fills the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element" id="ref-for-the-html-element③">html</a></code> element
quirk</span><a class="self-link" href="#the-body-element-fills-the-html-element-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑦">quirks mode</a>, if the <a data-link-type="dfn" href="#documents-body-element" id="ref-for-documents-body-element①">document’s body element</a> <var>body</var> is not null and if
it matches the following conditions: </p>
   <ul>
    <li>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑦">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②">width</a> property of <var>body</var> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> and <var>body</var> has
 a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode③">vertical writing mode</a>, or the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑧">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑤">height</a> property of <var>body</var> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto④">auto</a> and <var>body</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#horizontal-writing-mode" id="ref-for-horizontal-writing-mode②">horizontal writing mode</a>. <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]</a> </p>
    <li>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑨">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position②">position</a> property of <var>body</var> is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-absolute" id="ref-for-valdef-position-absolute①">absolute</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed" id="ref-for-valdef-position-fixed">fixed</a>. </p>
    <li>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①⓪">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float">float</a> property of <var>body</var> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-none" id="ref-for-valdef-float-none">none</a>. </p>
    <li>
     <p><var>body</var> is not an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level①">inline-level</a> element. </p>
    <li>
     <p><var>body</var> is not a <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#spanning-element" id="ref-for-spanning-element">spanning element</a>. <a data-link-type="biblio" href="#biblio-css3-multicol">[CSS3-MULTICOL]</a> </p>
   </ul>
   <p>...then <var>body</var> must have its <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#border-edge" id="ref-for-border-edge②">border box</a> size in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction②">block flow direction</a> set using
the following algorithm: </p>
   <ol>
    <li>
     <p>Let <var>margins</var> be the sum of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value④">used values</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left②">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right②">margin-right</a> properties of <var>body</var> if <var>body</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode" id="ref-for-vertical-writing-mode④">vertical writing mode</a>, otherwise let <var>margins</var> be the
 sum of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑤">used values</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom②">margin-bottom</a> properties of <var>body</var>. </p>
    <li>
     <p>Let <var>size</var> be the size of <var>body</var>’s parent element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#content-edge" id="ref-for-content-edge">content box</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction③">block flow
 direction</a> minus <var>margins</var>. </p>
    <li>
     <p>Return the bigger value of <var>size</var> and the normal <a data-link-type="dfn" href="https://drafts.csswg.org/css2/box.html#border-edge" id="ref-for-border-edge③">border box</a> size the element would
 have according to the CSS specification. </p>
   </ol>
   <p class="big-issue">What should happen if the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element" id="ref-for-the-html-element④">html</a></code> and the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element②">body</a></code> have different writing modes? </p>
   <h3 class="heading settled" data-level="3.8" id="the-table-cell-width-calculation-quirk"><span class="secno">3.8. </span><span class="content">The table cell width calculation quirk</span><a class="self-link" href="#the-table-cell-width-calculation-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑧">quirks mode</a>, for the purpose of calculating the <a data-link-type="dfn" href="https://dbaron.org/css/intrinsic/#inline-intrinsic-min" id="ref-for-inline-intrinsic-min">min-content width of an
inline formatting context</a> for which a table cell <var>cell</var> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block②">containing block</a>, if <var>cell</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①①">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width③">width</a> property that is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto⑤">auto</a>, <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code> elements
that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-level" id="ref-for-inline-level②">inline-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css2/conform.html#replaced-element" id="ref-for-replaced-element">replaced elements</a> in that <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-formatting-context" id="ref-for-inline-formatting-context">inline formatting context</a> must
not have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#soft-wrap-opportunity" id="ref-for-soft-wrap-opportunity">soft wrap opportunity</a> before or after them. <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> <a data-link-type="biblio" href="#biblio-intrinsic">[INTRINSIC]</a></p>
   <h3 class="heading settled" data-level="3.9" id="the-table-cell-nowrap-minimum-width-calculation-quirk"><span class="secno">3.9. </span><span class="content">The table cell nowrap minimum width
calculation quirk</span><a class="self-link" href="#the-table-cell-nowrap-minimum-width-calculation-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑨">quirks mode</a>, an element <var>cell</var> that matches the following conditions must act
as if it had an <a data-link-type="dfn" href="https://dbaron.org/css/intrinsic/#autotable" id="ref-for-autotable">outer min-content width of a table cell</a> in the automatic table layout
algorithm that is the bigger value of <var>cell</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①②">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width④">width</a> property and the <a data-link-type="dfn" href="https://dbaron.org/css/intrinsic/#autotable" id="ref-for-autotable①">outer min-content width of a table cell</a>. <a data-link-type="biblio" href="#biblio-intrinsic">[INTRINSIC]</a> </p>
   <ul>
    <li>
     <p><var>cell</var> is a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element" id="ref-for-the-td-element">td</a></code> element or a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-th-element" id="ref-for-the-th-element">th</a></code> element. </p>
    <li>
     <p><var>cell</var> has a <code>nowrap</code> attribute. </p>
    <li>
     <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①③">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑤">width</a> property of <var>cell</var> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> that is not
 zero. </p>
   </ul>
   <h3 class="heading settled" data-level="3.10" id="the-collapsing-table-quirk"><span class="secno">3.10. </span><span class="content">The collapsing table quirk</span><a class="self-link" href="#the-collapsing-table-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①⓪">quirks mode</a>, an element <var>table</var> that matches the following conditions must
have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑥">used value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑥">height</a> property of <span class="css">0</span> and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑦">used value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style</a> property of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-backgrounds-3/#valdef-line-style-none" id="ref-for-valdef-line-style-none">none</a>. </p>
   <ul>
    <li>
     <p><var>table</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①④">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display②">display</a> property that is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table" id="ref-for-valdef-display-table">table</a>. </p>
    <li>
     <p><var>table</var> has no child <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-row-group" id="ref-for-valdef-display-table-row-group①">table-row-group</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-header-group" id="ref-for-valdef-display-table-header-group①">table-header-group</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-footer-group" id="ref-for-valdef-display-table-footer-group①">table-footer-group</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-caption" id="ref-for-valdef-display-table-caption①">table-caption</a> box. </p>
    <li>
     <p><var>table</var> has no child <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-column-group" id="ref-for-valdef-display-table-column-group">table-column-group</a> box that itself has a child <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-column" id="ref-for-valdef-display-table-column">table-column</a> box. </p>
   </ul>
   <h3 class="heading settled" data-level="3.11" id="the-text-decoration-doesnt-propagate-into-tables-quirk"><span class="secno">3.11. </span><span class="content">The text decoration doesn’t propagate
into tables quirk</span><a class="self-link" href="#the-text-decoration-doesnt-propagate-into-tables-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①①">quirks mode</a>, text decoration must not propagate
into <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element" id="ref-for-the-table-element">table</a></code> elements.</p>
   <h3 class="heading settled algorithm" data-algorithm="The tables inherit color from body
quirk" data-level="3.12" id="the-tables-inherit-color-from-body-quirk"><span class="secno">3.12. </span><span class="content">The tables inherit color from body
quirk</span><a class="self-link" href="#the-tables-inherit-color-from-body-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①②">quirks mode</a>, the initial value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color①">color</a> property must be <span class="css">quirk-inherit</span>, a special value that has no keyword mapping to it. </p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①⑤">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color②">color</a> property of an element <var>element</var> must be calculated
using the following algorithm: </p>
   <ol>
    <li>
     <p>If the specified value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color③">color</a> property of <var>element</var> is not <span class="css">quirk-inherit</span>, jump to the last step. </p>
    <li>
     <p>If <var>element</var> is not a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element" id="ref-for-the-table-element①">table</a></code> element, jump to the last step. </p>
    <li>
     <p>If the <a data-link-type="dfn" href="#documents-body-element" id="ref-for-documents-body-element②">document’s body element</a> is null, jump to the last step. </p>
    <li>
     <p>Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑧">used value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color④">color</a> property of the <a data-link-type="dfn" href="#documents-body-element" id="ref-for-documents-body-element③">document’s body element</a>.
 Abort these steps. </p>
    <li>
     <p>If the specified value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color⑤">color</a> property of <var>element</var> is <span class="css">quirk-inherit</span>, let the
 specified value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color⑥">color</a> property of <var>element</var> be the initial value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color⑦">color</a> property
 according to the CSS specification. Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①⑥">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color⑧">color</a> property of <var>element</var> as specified in the CSS specification. </p>
   </ol>
   <h3 class="heading settled" data-level="3.13" id="the-table-cell-height-box-sizing-quirk"><span class="secno">3.13. </span><span class="content">The table cell height box sizing quirk</span><a class="self-link" href="#the-table-cell-height-box-sizing-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①③">quirks mode</a>, elements that have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①⑦">computed value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display③">display</a> property of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-table-cell" id="ref-for-valdef-display-table-cell②">table-cell</a> must act as they have <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑨">used value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing">box-sizing</a> property of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-box-sizing-border-box" id="ref-for-valdef-box-sizing-border-box">border-box</a>, but only for the purpose of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑦">height</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height" id="ref-for-propdef-min-height①">min-height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height①">max-height</a> properties. </p>
   <h2 class="heading settled" data-level="4" id="selectors"><span class="secno">4. </span><span class="content">Selectors</span><a class="self-link" href="#selectors"></a></h2>
   <p class="big-issue">The following test appears to be invalid. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=733682#c20">chromium issue
733682</a>.</p>
   <h3 class="heading settled algorithm" data-algorithm="The :active and :hover quirk" data-level="4.1" id="the-active-and-hover-quirk"><span class="secno">4.1. </span><span class="content">The :active and :hover quirk</span><a class="self-link" href="#the-active-and-hover-quirk"></a></h3>
   <p>In <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①④">quirks mode</a>, a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#compound" id="ref-for-compound">compound selector</a> <var>selector</var> that matches the following
conditions must not match elements that would not also match the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#any-link-pseudo" id="ref-for-any-link-pseudo">:any-link</a> selector. <a data-link-type="biblio" href="#biblio-selectors4">[SELECTORS4]</a> </p>
   <ul>
    <li>
     <p><var>selector</var> uses the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#active-pseudo" id="ref-for-active-pseudo">:active</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#hover-pseudo" id="ref-for-hover-pseudo">:hover</a> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-class" id="ref-for-pseudo-class">pseudo-classes</a>. </p>
    <li>
     <p><var>selector</var> does not use a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#type-selector" id="ref-for-type-selector">type selector</a>. </p>
    <li>
     <p><var>selector</var> does not use an <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#attribute-selector" id="ref-for-attribute-selector">attribute selector</a>. </p>
    <li>
     <p><var>selector</var> does not use an <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#id-selector" id="ref-for-id-selector">ID selector</a>. </p>
    <li>
     <p><var>selector</var> does not use a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#class-selector" id="ref-for-class-selector">class selector</a>. </p>
    <li>
     <p><var>selector</var> does not use a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-class" id="ref-for-pseudo-class①">pseudo-class</a> selector other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#active-pseudo" id="ref-for-active-pseudo①">:active</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#hover-pseudo" id="ref-for-hover-pseudo①">:hover</a>. </p>
    <li>
     <p><var>selector</var> does not use a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> selector. </p>
    <li>
     <p><var>selector</var> is not part of an argument to a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#functional-pseudo-class" id="ref-for-functional-pseudo-class">functional pseudo-class</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①">pseudo-element</a>. </p>
   </ul>
   <h2 class="no-num heading settled" id="security-privacy"><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#security-privacy"></a></h2>
   <p>There are no known security or privacy impacts in this specification.</p>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Thanks to
Anne van Kesteren,
Boris Zbarsky,
Chris Rebert,
Dan Mulvey,
David Baron,
Kang-Hao Lu,
Ms2ger,
Simon Sapin,
and
Tab Atkins
for their useful comments. </p>
   <p>Special thanks to Boris Zbarsky and David Baron for documenting <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior">Mozilla’s
quirks in MDN</a>. </p>
   <p>This standard is written by Simon Pieters (<a href="https://bocoup.com/">Bocoup</a>, <a href="mailto:zcorpan@gmail.com">zcorpan@gmail.com</a>). </p>
   <p>Copyright © 1970 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons Attribution
4.0 International License</a>. </p>
  </main>
<script>
"use strict";
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js");
}
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#documents-body-element">document’s body element</a><span>, in §2.2</span>
   <li><a href="#quirky-color-value">&lt;quirky-color></a><span>, in §3.1</span>
   <li><a href="#quirky-color">quirky color</a><span>, in §3.1</span>
   <li><a href="#quirky-length">quirky length</a><span>, in §3.2</span>
   <li><a href="#quirky-length-value">&lt;quirky-length></a><span>, in §3.2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-background-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-color">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-color">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-width">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-border-bottom-width①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-color">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-color">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-width">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-border-left-width①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-color">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-width">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-border-right-width①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-style">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-color">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-width">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-border-top-width①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-width">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-line-style-none">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#valdef-line-style-none">https://drafts.csswg.org/css-backgrounds-3/#valdef-line-style-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-line-style-none">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin">https://drafts.csswg.org/css-box-3/#propdef-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom">https://drafts.csswg.org/css-box-3/#propdef-margin-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-bottom">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-margin-bottom①">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-propdef-margin-bottom②">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-left">https://drafts.csswg.org/css-box-3/#propdef-margin-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-left">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-margin-left①">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-propdef-margin-left②">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-right">https://drafts.csswg.org/css-box-3/#propdef-margin-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-right">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-margin-right①">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-propdef-margin-right②">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-top">https://drafts.csswg.org/css-box-3/#propdef-margin-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-top">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-margin-top①">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-propdef-margin-top②">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding">https://drafts.csswg.org/css-box-3/#propdef-padding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom">https://drafts.csswg.org/css-box-3/#propdef-padding-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-bottom">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-padding-bottom①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-left">https://drafts.csswg.org/css-box-3/#propdef-padding-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-left">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-padding-left①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-right">https://drafts.csswg.org/css-box-3/#propdef-padding-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-right">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-padding-right①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-top">https://drafts.csswg.org/css-box-3/#propdef-padding-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-top">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-padding-top①">3.3. The line height calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">3.5. The percentage height calculation
quirk</a> <a href="#ref-for-computed-value①">(2)</a> <a href="#ref-for-computed-value②">(3)</a> <a href="#ref-for-computed-value③">(4)</a> <a href="#ref-for-computed-value④">(5)</a>
    <li><a href="#ref-for-computed-value⑤">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-computed-value⑥">(2)</a>
    <li><a href="#ref-for-computed-value⑦">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-computed-value⑧">(2)</a> <a href="#ref-for-computed-value⑨">(3)</a> <a href="#ref-for-computed-value①⓪">(4)</a>
    <li><a href="#ref-for-computed-value①①">3.8. The table cell width calculation quirk</a>
    <li><a href="#ref-for-computed-value①②">3.9. The table cell nowrap minimum width
calculation quirk</a> <a href="#ref-for-computed-value①③">(2)</a>
    <li><a href="#ref-for-computed-value①④">3.10. The collapsing table quirk</a>
    <li><a href="#ref-for-computed-value①⑤">3.12. The tables inherit color from body
quirk</a> <a href="#ref-for-computed-value①⑥">(2)</a>
    <li><a href="#ref-for-computed-value①⑦">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">3.3. The line height calculation quirk</a> <a href="#ref-for-used-value①">(2)</a>
    <li><a href="#ref-for-used-value②">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-used-value③">(2)</a>
    <li><a href="#ref-for-used-value④">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-used-value⑤">(2)</a>
    <li><a href="#ref-for-used-value⑥">3.10. The collapsing table quirk</a> <a href="#ref-for-used-value⑦">(2)</a>
    <li><a href="#ref-for-used-value⑧">3.12. The tables inherit color from body
quirk</a>
    <li><a href="#ref-for-used-value⑨">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://drafts.csswg.org/css-color-3/#valuea-def-color">https://drafts.csswg.org/css-color-3/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">3.1. The hashless hex color quirk</a> <a href="#ref-for-valuea-def-color①">(2)</a> <a href="#ref-for-valuea-def-color②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-color">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-color">https://drafts.csswg.org/css-color-4/#propdef-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color">3.1. The hashless hex color quirk</a>
    <li><a href="#ref-for-propdef-color①">3.12. The tables inherit color from body
quirk</a> <a href="#ref-for-propdef-color②">(2)</a> <a href="#ref-for-propdef-color③">(3)</a> <a href="#ref-for-propdef-color④">(4)</a> <a href="#ref-for-propdef-color⑤">(5)</a> <a href="#ref-for-propdef-color⑥">(6)</a> <a href="#ref-for-propdef-color⑦">(7)</a> <a href="#ref-for-propdef-color⑧">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-ruledef-supports">
   <a href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports">https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-supports">3.1. The hashless hex color quirk</a>
    <li><a href="#ref-for-at-ruledef-supports①">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-css-supports">
   <a href="https://drafts.csswg.org/css-conditional-3/#dom-css-supports">https://drafts.csswg.org/css-conditional-3/#dom-css-supports</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-supports">3.1. The hashless hex color quirk</a>
    <li><a href="#ref-for-dom-css-supports①">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container">
   <a href="https://drafts.csswg.org/css-display-3/#block-container">https://drafts.csswg.org/css-display-3/#block-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">3.5. The percentage height calculation
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">3.5. The percentage height calculation
quirk</a> <a href="#ref-for-containing-block①">(2)</a>
    <li><a href="#ref-for-containing-block②">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">3.5. The percentage height calculation
quirk</a> <a href="#ref-for-propdef-display①">(2)</a>
    <li><a href="#ref-for-propdef-display②">3.10. The collapsing table quirk</a>
    <li><a href="#ref-for-propdef-display③">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-initial-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#initial-containing-block">https://drafts.csswg.org/css-display-3/#initial-containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-containing-block">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-initial-containing-block①">3.6. The html element fills the viewport
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#inline-formatting-context">https://drafts.csswg.org/css-display-3/#inline-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-formatting-context">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-level">
   <a href="https://drafts.csswg.org/css-display-3/#inline-level">https://drafts.csswg.org/css-display-3/#inline-level</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level">3.4. The blocks ignore line-height quirk</a>
    <li><a href="#ref-for-inline-level①">3.7. The body element fills the html element
quirk</a>
    <li><a href="#ref-for-inline-level②">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table">https://drafts.csswg.org/css-display-3/#valdef-display-table</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-caption">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-caption">https://drafts.csswg.org/css-display-3/#valdef-display-table-caption</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-caption">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-valdef-display-table-caption①">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-cell">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-cell">https://drafts.csswg.org/css-display-3/#valdef-display-table-cell</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-cell">3.5. The percentage height calculation
quirk</a> <a href="#ref-for-valdef-display-table-cell①">(2)</a>
    <li><a href="#ref-for-valdef-display-table-cell②">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-column">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-column">https://drafts.csswg.org/css-display-3/#valdef-display-table-column</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-column">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-column-group">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-column-group">https://drafts.csswg.org/css-display-3/#valdef-display-table-column-group</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-column-group">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-footer-group">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-footer-group">https://drafts.csswg.org/css-display-3/#valdef-display-table-footer-group</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-footer-group">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-valdef-display-table-footer-group①">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-header-group">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-header-group">https://drafts.csswg.org/css-display-3/#valdef-display-table-header-group</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-header-group">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-valdef-display-table-header-group①">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-row">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-row">https://drafts.csswg.org/css-display-3/#valdef-display-table-row</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-row">3.5. The percentage height calculation
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-table-row-group">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-table-row-group">https://drafts.csswg.org/css-display-3/#valdef-display-table-row-group</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-row-group">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-valdef-display-table-row-group①">3.10. The collapsing table quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">https://drafts.csswg.org/css-fonts-3/#propdef-font-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-vertical-align">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align">https://drafts.csswg.org/css-inline-3/#propdef-vertical-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-vertical-align">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-clip">
   <a href="https://drafts.fxtf.org/css-masking-1/#propdef-clip">https://drafts.fxtf.org/css-masking-1/#propdef-clip</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clip">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-clip-rect">
   <a href="https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect">https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-clip-rect">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-float-none">
   <a href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-none">https://drafts.csswg.org/css-page-floats-3/#valdef-float-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-float-none">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-absolute">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-absolute">https://drafts.csswg.org/css-position-3/#valdef-position-absolute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-absolute">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-valdef-position-absolute①">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-bottom">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-bottom">https://drafts.csswg.org/css-position-3/#propdef-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-bottom">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-fixed">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed">https://drafts.csswg.org/css-position-3/#valdef-position-fixed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-fixed">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-left">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-left">https://drafts.csswg.org/css-position-3/#propdef-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-left">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-position">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-position">https://drafts.csswg.org/css-position-3/#propdef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-position">3.5. The percentage height calculation
quirk</a> <a href="#ref-for-propdef-position①">(2)</a>
    <li><a href="#ref-for-propdef-position②">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-relative">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-relative">https://drafts.csswg.org/css-position-3/#valdef-position-relative</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-relative">3.5. The percentage height calculation
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-right">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-right">https://drafts.csswg.org/css-position-3/#propdef-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-right">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-static">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-static">https://drafts.csswg.org/css-position-3/#valdef-position-static</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-static">3.5. The percentage height calculation
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-top">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-top">https://drafts.csswg.org/css-position-3/#propdef-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-top">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-auto">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-auto">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-valdef-width-auto①">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-valdef-width-auto②">(2)</a>
    <li><a href="#ref-for-valdef-width-auto③">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-valdef-width-auto④">(2)</a>
    <li><a href="#ref-for-valdef-width-auto⑤">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-box-sizing-border-box">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-box-sizing-border-box">https://drafts.csswg.org/css-sizing-3/#valdef-box-sizing-border-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-box-sizing-border-box">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-sizing">
   <a href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing">https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-sizing">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-dimension-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token">https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-dimension-token">3.1. The hashless hex color quirk</a> <a href="#ref-for-typedef-dimension-token①">(2)</a> <a href="#ref-for-typedef-dimension-token②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token">https://drafts.csswg.org/css-syntax-3/#typedef-ident-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident-token">3.1. The hashless hex color quirk</a> <a href="#ref-for-typedef-ident-token①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-number-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token">https://drafts.csswg.org/css-syntax-3/#typedef-number-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-number-token">3.1. The hashless hex color quirk</a> <a href="#ref-for-typedef-number-token①">(2)</a>
    <li><a href="#ref-for-typedef-number-token②">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-component-value">
   <a href="https://drafts.csswg.org/css-syntax-3/#component-value">https://drafts.csswg.org/css-syntax-3/#component-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-component-value">3.1. The hashless hex color quirk</a> <a href="#ref-for-component-value①">(2)</a> <a href="#ref-for-component-value②">(3)</a>
    <li><a href="#ref-for-component-value③">3.2. The unitless length quirk</a> <a href="#ref-for-component-value④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-spacing">
   <a href="https://drafts.csswg.org/css-tables-3/#propdef-border-spacing">https://drafts.csswg.org/css-tables-3/#propdef-border-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-spacing">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-table-wrapper-box">
   <a href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box">https://drafts.csswg.org/css-tables-3/#table-wrapper-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-table-wrapper-box">3.5. The percentage height calculation
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-letter-spacing">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing">https://drafts.csswg.org/css-text-3/#propdef-letter-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-letter-spacing">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-soft-wrap-opportunity">
   <a href="https://drafts.csswg.org/css-text-3/#soft-wrap-opportunity">https://drafts.csswg.org/css-text-3/#soft-wrap-opportunity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-soft-wrap-opportunity">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-indent">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-indent">https://drafts.csswg.org/css-text-3/#propdef-text-indent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-indent">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-word-spacing">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-word-spacing">https://drafts.csswg.org/css-text-3/#propdef-word-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-word-spacing">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">3.2. The unitless length quirk</a> <a href="#ref-for-length-value①">(2)</a> <a href="#ref-for-length-value②">(3)</a>
    <li><a href="#ref-for-length-value③">3.9. The table cell nowrap minimum width
calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">3.5. The percentage height calculation
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number">
   <a href="https://drafts.csswg.org/css-values-4/#number">https://drafts.csswg.org/css-values-4/#number</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-px">
   <a href="https://drafts.csswg.org/css-values-4/#px">https://drafts.csswg.org/css-values-4/#px</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-px">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">3.1. The hashless hex color quirk</a>
    <li><a href="#ref-for-comb-one①">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-flow-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction">https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-flow-direction">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-block-flow-direction①">(2)</a>
    <li><a href="#ref-for-block-flow-direction②">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-block-flow-direction③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-horizontal-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#horizontal-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#horizontal-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-horizontal-writing-mode">3.3. The line height calculation quirk</a>
    <li><a href="#ref-for-horizontal-writing-mode①">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-horizontal-writing-mode②">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-vertical-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#vertical-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-writing-mode">3.3. The line height calculation quirk</a>
    <li><a href="#ref-for-vertical-writing-mode①">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-vertical-writing-mode②">(2)</a>
    <li><a href="#ref-for-vertical-writing-mode③">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-vertical-writing-mode④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container-element">
   <a href="https://drafts.csswg.org/css2/visuren.html#block-container-element">https://drafts.csswg.org/css2/visuren.html#block-container-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container-element">3.4. The blocks ignore line-height quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-border-edge">
   <a href="https://drafts.csswg.org/css2/box.html#border-edge">https://drafts.csswg.org/css2/box.html#border-edge</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-edge">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-border-edge①">(2)</a>
    <li><a href="#ref-for-border-edge②">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-border-edge③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-content-edge">
   <a href="https://drafts.csswg.org/css2/box.html#content-edge">https://drafts.csswg.org/css2/box.html#content-edge</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-edge">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-float">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">https://drafts.csswg.org/css2/visuren.html#propdef-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-float">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-height①">3.5. The percentage height calculation
quirk</a> <a href="#ref-for-propdef-height②">(2)</a> <a href="#ref-for-propdef-height③">(3)</a>
    <li><a href="#ref-for-propdef-height④">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-propdef-height⑤">3.7. The body element fills the html element
quirk</a>
    <li><a href="#ref-for-propdef-height⑥">3.10. The collapsing table quirk</a>
    <li><a href="#ref-for-propdef-height⑦">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-illegal">
   <a href="https://drafts.csswg.org/css2/conform.html#illegal">https://drafts.csswg.org/css2/conform.html#illegal</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-illegal">3.1. The hashless hex color quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-line-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">https://drafts.csswg.org/css2/visudet.html#propdef-line-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-line-height">3.3. The line height calculation quirk</a>
    <li><a href="#ref-for-propdef-line-height①">3.4. The blocks ignore line-height quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">https://drafts.csswg.org/css2/visudet.html#propdef-max-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-height">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-max-height①">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">https://drafts.csswg.org/css2/visudet.html#propdef-max-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-width">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height">https://drafts.csswg.org/css2/visudet.html#propdef-min-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-height">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-min-height①">3.13. The table cell height box sizing quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width">https://drafts.csswg.org/css2/visudet.html#propdef-min-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-width">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-replaced-element">
   <a href="https://drafts.csswg.org/css2/conform.html#replaced-element">https://drafts.csswg.org/css2/conform.html#replaced-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaced-element">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-propdef-width①">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-propdef-width②">3.7. The body element fills the html element
quirk</a>
    <li><a href="#ref-for-propdef-width③">3.8. The table cell width calculation quirk</a>
    <li><a href="#ref-for-propdef-width④">3.9. The table cell nowrap minimum width
calculation quirk</a> <a href="#ref-for-propdef-width⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-spanning-element">
   <a href="https://drafts.csswg.org/css-multicol-1/#spanning-element">https://drafts.csswg.org/css-multicol-1/#spanning-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-spanning-element">3.7. The body element fills the html element
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css">
   <a href="https://www.w3.org/TR/cssom-1/#css">https://www.w3.org/TR/cssom-1/#css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css">3.1. The hashless hex color quirk</a>
    <li><a href="#ref-for-css①">3.2. The unitless length quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-child">
   <a href="https://dom.spec.whatwg.org/#concept-tree-child">https://dom.spec.whatwg.org/#concept-tree-child</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-child">2.2. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document-element">
   <a href="https://dom.spec.whatwg.org/#document-element">https://dom.spec.whatwg.org/#document-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-element">2.2. Terminology</a> <a href="#ref-for-document-element①">(2)</a>
    <li><a href="#ref-for-document-element②">3.6. The html element fills the viewport
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-limited-quirks">
   <a href="https://dom.spec.whatwg.org/#concept-document-limited-quirks">https://dom.spec.whatwg.org/#concept-document-limited-quirks</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-limited-quirks">1.2. Goals</a>
    <li><a href="#ref-for-concept-document-limited-quirks①">3.3. The line height calculation quirk</a>
    <li><a href="#ref-for-concept-document-limited-quirks②">3.4. The blocks ignore line-height quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-no-quirks">
   <a href="https://dom.spec.whatwg.org/#concept-document-no-quirks">https://dom.spec.whatwg.org/#concept-document-no-quirks</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-no-quirks">1.2. Goals</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-quirks">
   <a href="https://dom.spec.whatwg.org/#concept-document-quirks">https://dom.spec.whatwg.org/#concept-document-quirks</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-quirks">1.2. Goals</a>
    <li><a href="#ref-for-concept-document-quirks①">3.1. The hashless hex color quirk</a>
    <li><a href="#ref-for-concept-document-quirks②">3.2. The unitless length quirk</a>
    <li><a href="#ref-for-concept-document-quirks③">3.3. The line height calculation quirk</a>
    <li><a href="#ref-for-concept-document-quirks④">3.4. The blocks ignore line-height quirk</a>
    <li><a href="#ref-for-concept-document-quirks⑤">3.5. The percentage height calculation
quirk</a>
    <li><a href="#ref-for-concept-document-quirks⑥">3.6. The html element fills the viewport
quirk</a>
    <li><a href="#ref-for-concept-document-quirks⑦">3.7. The body element fills the html element
quirk</a>
    <li><a href="#ref-for-concept-document-quirks⑧">3.8. The table cell width calculation quirk</a>
    <li><a href="#ref-for-concept-document-quirks⑨">3.9. The table cell nowrap minimum width
calculation quirk</a>
    <li><a href="#ref-for-concept-document-quirks①⓪">3.10. The collapsing table quirk</a>
    <li><a href="#ref-for-concept-document-quirks①①">3.11. The text decoration doesn’t propagate
into tables quirk</a>
    <li><a href="#ref-for-concept-document-quirks①②">3.12. The tables inherit color from body
quirk</a>
    <li><a href="#ref-for-concept-document-quirks①③">3.13. The table cell height box sizing quirk</a>
    <li><a href="#ref-for-concept-document-quirks①④">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-body-element">
   <a href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element">https://html.spec.whatwg.org/multipage/sections.html#the-body-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-body-element">2.2. Terminology</a>
    <li><a href="#ref-for-the-body-element①">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-the-body-element②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-frameset">
   <a href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset">https://html.spec.whatwg.org/multipage/obsolete.html#frameset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frameset">2.2. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-html-element">
   <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-html-element">https://html.spec.whatwg.org/multipage/semantics.html#the-html-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-html-element">2.2. Terminology</a>
    <li><a href="#ref-for-the-html-element①">3.6. The html element fills the viewport
quirk</a> <a href="#ref-for-the-html-element②">(2)</a>
    <li><a href="#ref-for-the-html-element③">3.7. The body element fills the html element
quirk</a> <a href="#ref-for-the-html-element④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-img-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-img-element">3.8. The table cell width calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-table-element">
   <a href="https://html.spec.whatwg.org/multipage/tables.html#the-table-element">https://html.spec.whatwg.org/multipage/tables.html#the-table-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-table-element">3.11. The text decoration doesn’t propagate
into tables quirk</a>
    <li><a href="#ref-for-the-table-element①">3.12. The tables inherit color from body
quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-td-element">
   <a href="https://html.spec.whatwg.org/multipage/tables.html#the-td-element">https://html.spec.whatwg.org/multipage/tables.html#the-td-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-td-element">3.9. The table cell nowrap minimum width
calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-th-element">
   <a href="https://html.spec.whatwg.org/multipage/tables.html#the-th-element">https://html.spec.whatwg.org/multipage/tables.html#the-th-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-th-element">3.9. The table cell nowrap minimum width
calculation quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-body-element-2">
   <a href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2">https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-body-element-2">2.2. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-pseudo">
   <a href="https://drafts.csswg.org/selectors-4/#active-pseudo">https://drafts.csswg.org/selectors-4/#active-pseudo</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-pseudo">4.1. The :active and :hover quirk</a> <a href="#ref-for-active-pseudo①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-any-link-pseudo">
   <a href="https://drafts.csswg.org/selectors-4/#any-link-pseudo">https://drafts.csswg.org/selectors-4/#any-link-pseudo</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-any-link-pseudo">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-hover-pseudo">
   <a href="https://drafts.csswg.org/selectors-4/#hover-pseudo">https://drafts.csswg.org/selectors-4/#hover-pseudo</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hover-pseudo">4.1. The :active and :hover quirk</a> <a href="#ref-for-hover-pseudo①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attribute-selector">
   <a href="https://drafts.csswg.org/selectors-4/#attribute-selector">https://drafts.csswg.org/selectors-4/#attribute-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attribute-selector">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-class-selector">
   <a href="https://drafts.csswg.org/selectors-4/#class-selector">https://drafts.csswg.org/selectors-4/#class-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-class-selector">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-compound">
   <a href="https://drafts.csswg.org/selectors-4/#compound">https://drafts.csswg.org/selectors-4/#compound</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compound">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-functional-pseudo-class">
   <a href="https://drafts.csswg.org/selectors-4/#functional-pseudo-class">https://drafts.csswg.org/selectors-4/#functional-pseudo-class</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-functional-pseudo-class">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-id-selector">
   <a href="https://drafts.csswg.org/selectors-4/#id-selector">https://drafts.csswg.org/selectors-4/#id-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-id-selector">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-class">
   <a href="https://drafts.csswg.org/selectors-4/#pseudo-class">https://drafts.csswg.org/selectors-4/#pseudo-class</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-class">4.1. The :active and :hover quirk</a> <a href="#ref-for-pseudo-class①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-element">
   <a href="https://drafts.csswg.org/selectors-4/#pseudo-element">https://drafts.csswg.org/selectors-4/#pseudo-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-element">4.1. The :active and :hover quirk</a> <a href="#ref-for-pseudo-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-type-selector">
   <a href="https://drafts.csswg.org/selectors-4/#type-selector">https://drafts.csswg.org/selectors-4/#type-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-type-selector">4.1. The :active and :hover quirk</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background-color" style="color:initial">background-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position" style="color:initial">background-position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-color" style="color:initial">border-bottom-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-width" style="color:initial">border-bottom-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-color" style="color:initial">border-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-color" style="color:initial">border-left-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-width" style="color:initial">border-left-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-color" style="color:initial">border-right-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-width" style="color:initial">border-right-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-style" style="color:initial">border-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-color" style="color:initial">border-top-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-width" style="color:initial">border-top-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-width" style="color:initial">border-width</span>
     <li><span class="dfn-paneled" id="term-for-valdef-line-style-none" style="color:initial">none</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin" style="color:initial">margin</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-bottom" style="color:initial">margin-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-left" style="color:initial">margin-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-right" style="color:initial">margin-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-top" style="color:initial">margin-top</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding" style="color:initial">padding</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-bottom" style="color:initial">padding-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-left" style="color:initial">padding-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-right" style="color:initial">padding-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-top" style="color:initial">padding-top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-color" style="color:initial">color</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-conditional-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-ruledef-supports" style="color:initial">@supports</span>
     <li><span class="dfn-paneled" id="term-for-dom-css-supports" style="color:initial">supports(property, value)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-container" style="color:initial">block container</span>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-initial-containing-block" style="color:initial">initial containing block</span>
     <li><span class="dfn-paneled" id="term-for-inline-formatting-context" style="color:initial">inline formatting context</span>
     <li><span class="dfn-paneled" id="term-for-inline-level" style="color:initial">inline-level</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table" style="color:initial">table</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-caption" style="color:initial">table-caption</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-cell" style="color:initial">table-cell</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-column" style="color:initial">table-column</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-column-group" style="color:initial">table-column-group</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-footer-group" style="color:initial">table-footer-group</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-header-group" style="color:initial">table-header-group</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-row" style="color:initial">table-row</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-table-row-group" style="color:initial">table-row-group</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size" style="color:initial">font-size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-vertical-align" style="color:initial">vertical-align</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-masking-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-clip" style="color:initial">clip</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-clip-rect" style="color:initial">rect()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-page-floats-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-float-none" style="color:initial">none</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-position-absolute" style="color:initial">absolute</span>
     <li><span class="dfn-paneled" id="term-for-propdef-bottom" style="color:initial">bottom</span>
     <li><span class="dfn-paneled" id="term-for-valdef-position-fixed" style="color:initial">fixed</span>
     <li><span class="dfn-paneled" id="term-for-propdef-left" style="color:initial">left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-position" style="color:initial">position</span>
     <li><span class="dfn-paneled" id="term-for-valdef-position-relative" style="color:initial">relative</span>
     <li><span class="dfn-paneled" id="term-for-propdef-right" style="color:initial">right</span>
     <li><span class="dfn-paneled" id="term-for-valdef-position-static" style="color:initial">static</span>
     <li><span class="dfn-paneled" id="term-for-propdef-top" style="color:initial">top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-valdef-box-sizing-border-box" style="color:initial">border-box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-box-sizing" style="color:initial">box-sizing</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-dimension-token" style="color:initial">&lt;dimension-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-ident-token" style="color:initial">&lt;ident-token></span>
     <li><span class="dfn-paneled" id="term-for-typedef-number-token" style="color:initial">&lt;number-token></span>
     <li><span class="dfn-paneled" id="term-for-component-value" style="color:initial">component value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-tables-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-spacing" style="color:initial">border-spacing</span>
     <li><span class="dfn-paneled" id="term-for-table-wrapper-box" style="color:initial">table wrapper box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-letter-spacing" style="color:initial">letter-spacing</span>
     <li><span class="dfn-paneled" id="term-for-soft-wrap-opportunity" style="color:initial">soft wrap opportunity</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-indent" style="color:initial">text-indent</span>
     <li><span class="dfn-paneled" id="term-for-propdef-word-spacing" style="color:initial">word-spacing</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-number" style="color:initial">number</span>
     <li><span class="dfn-paneled" id="term-for-px" style="color:initial">px</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-flow-direction" style="color:initial">block flow direction</span>
     <li><span class="dfn-paneled" id="term-for-horizontal-writing-mode" style="color:initial">horizontal writing mode</span>
     <li><span class="dfn-paneled" id="term-for-vertical-writing-mode" style="color:initial">vertical writing mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-container-element" style="color:initial">block container element</span>
     <li><span class="dfn-paneled" id="term-for-border-edge" style="color:initial">border box</span>
     <li><span class="dfn-paneled" id="term-for-content-edge" style="color:initial">content box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-illegal" style="color:initial">illegal</span>
     <li><span class="dfn-paneled" id="term-for-propdef-line-height" style="color:initial">line-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-height" style="color:initial">max-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-width" style="color:initial">max-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-height" style="color:initial">min-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-width" style="color:initial">min-width</span>
     <li><span class="dfn-paneled" id="term-for-replaced-element" style="color:initial">replaced element</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-MULTICOL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-spanning-element" style="color:initial">spanning element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSSOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css" style="color:initial">CSS</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-tree-child" style="color:initial">child</span>
     <li><span class="dfn-paneled" id="term-for-document-element" style="color:initial">document element</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-limited-quirks" style="color:initial">limited-quirks mode</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-no-quirks" style="color:initial">no-quirks mode</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-quirks" style="color:initial">quirks mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-body-element" style="color:initial">body</span>
     <li><span class="dfn-paneled" id="term-for-frameset" style="color:initial">frameset</span>
     <li><span class="dfn-paneled" id="term-for-the-html-element" style="color:initial">html</span>
     <li><span class="dfn-paneled" id="term-for-the-img-element" style="color:initial">img</span>
     <li><span class="dfn-paneled" id="term-for-the-table-element" style="color:initial">table</span>
     <li><span class="dfn-paneled" id="term-for-the-td-element" style="color:initial">td</span>
     <li><span class="dfn-paneled" id="term-for-the-th-element" style="color:initial">th</span>
     <li><span class="dfn-paneled" id="term-for-the-body-element-2" style="color:initial">the body element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SELECTORS4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-active-pseudo" style="color:initial">:active</span>
     <li><span class="dfn-paneled" id="term-for-any-link-pseudo" style="color:initial">:any-link</span>
     <li><span class="dfn-paneled" id="term-for-hover-pseudo" style="color:initial">:hover</span>
     <li><span class="dfn-paneled" id="term-for-attribute-selector" style="color:initial">attribute selector</span>
     <li><span class="dfn-paneled" id="term-for-class-selector" style="color:initial">class selector</span>
     <li><span class="dfn-paneled" id="term-for-compound" style="color:initial">compound selector</span>
     <li><span class="dfn-paneled" id="term-for-functional-pseudo-class" style="color:initial">functional pseudo-class</span>
     <li><span class="dfn-paneled" id="term-for-id-selector" style="color:initial">id selector</span>
     <li><span class="dfn-paneled" id="term-for-pseudo-class" style="color:initial">pseudo-class</span>
     <li><span class="dfn-paneled" id="term-for-pseudo-element" style="color:initial">pseudo-element</span>
     <li><span class="dfn-paneled" id="term-for-type-selector" style="color:initial">type selector</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/">CSS Backgrounds and Borders Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-3/">CSS Box Model Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-box-3/">https://drafts.csswg.org/css-box-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade/">CSS Cascading and Inheritance Level 4</a>. URL: <a href="https://drafts.csswg.org/css-cascade/">https://drafts.csswg.org/css-cascade/</a>
   <dt id="biblio-css-color-3">[CSS-COLOR-3]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-color-3/">https://drafts.csswg.org/css-color-3/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://drafts.csswg.org/css-color/">CSS Color Module Level 4</a>. URL: <a href="https://drafts.csswg.org/css-color/">https://drafts.csswg.org/css-color/</a>
   <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3]
   <dd>CSS Conditional Rules Module Level 3 URL: <a href="https://drafts.csswg.org/css-conditional-3/">https://drafts.csswg.org/css-conditional-3/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-display/">CSS Display Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://drafts.csswg.org/css-fonts/">CSS Fonts Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-fonts/">https://drafts.csswg.org/css-fonts/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://drafts.csswg.org/css-inline-3/">CSS Inline Layout Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a>
   <dt id="biblio-css-masking-1">[CSS-MASKING-1]
   <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://drafts.fxtf.org/css-masking-1/">CSS Masking Module Level 1</a>. URL: <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a>
   <dt id="biblio-css-page-floats-3">[CSS-PAGE-FLOATS-3]
   <dd>Johannes Wilm. <a href="https://drafts.csswg.org/css-page-floats/">CSS Page Floats</a>. URL: <a href="https://drafts.csswg.org/css-page-floats/">https://drafts.csswg.org/css-page-floats/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://drafts.csswg.org/css-position/">CSS Positioned Layout Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-position/">https://drafts.csswg.org/css-position/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/">CSS Syntax Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a>
   <dt id="biblio-css-tables-3">[CSS-TABLES-3]
   <dd>Greg Whitworth. <a href="https://drafts.csswg.org/css-tables-3/">CSS Table Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-tables-3/">https://drafts.csswg.org/css-tables-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/">CSS Text Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/">CSS Values and Units Module Level 3</a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/">CSS Values and Units Module Level 4</a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/">CSS Writing Modes Level 3</a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/">CSS Writing Modes Level 4</a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="http://dev.w3.org/csswg/css2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. URL: <a href="http://dev.w3.org/csswg/css2/">http://dev.w3.org/csswg/css2/</a>
   <dt id="biblio-css3-multicol">[CSS3-MULTICOL]
   <dd>Florian Rivoal; Rachel Andrew. <a href="https://drafts.csswg.org/css-multicol/">CSS Multi-column Layout Module Level 1</a>. URL: <a href="https://drafts.csswg.org/css-multicol/">https://drafts.csswg.org/css-multicol/</a>
   <dt id="biblio-cssom">[CSSOM]
   <dd>Simon Pieters; Glenn Adams. <a href="https://drafts.csswg.org/cssom/">CSS Object Model (CSSOM)</a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-intrinsic">[INTRINSIC]
   <dd>David Baron. <a href="https://dbaron.org/css/intrinsic/">More Precise Definitions of Intrinsic Widths and Table Layout (Proposal)</a>. URL: <a href="https://dbaron.org/css/intrinsic/">https://dbaron.org/css/intrinsic/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors4">[SELECTORS4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/">Selectors Level 4</a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-cssom-view">[CSSOM-VIEW]
   <dd>Simon Pieters. <a href="https://drafts.csswg.org/cssom-view/">CSSOM View Module</a>. URL: <a href="https://drafts.csswg.org/cssom-view/">https://drafts.csswg.org/cssom-view/</a>
  </dl>
  <aside class="dfn-panel" data-for="documents-body-element">
   <b><a href="#documents-body-element">#documents-body-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-documents-body-element">2.2. Terminology</a>
    <li><a href="#ref-for-documents-body-element①">3.7. The body element fills the html element
quirk</a>
    <li><a href="#ref-for-documents-body-element②">3.12. The tables inherit color from body
quirk</a> <a href="#ref-for-documents-body-element③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quirky-color">
   <b><a href="#quirky-color">#quirky-color</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quirky-color">1.2. Goals</a>
    <li><a href="#ref-for-quirky-color①">3.1. The hashless hex color quirk</a> <a href="#ref-for-quirky-color②">(2)</a> <a href="#ref-for-quirky-color③">(3)</a> <a href="#ref-for-quirky-color④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quirky-color-value">
   <b><a href="#quirky-color-value">#quirky-color-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quirky-color-value">3.1. The hashless hex color quirk</a> <a href="#ref-for-quirky-color-value①">(2)</a> <a href="#ref-for-quirky-color-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quirky-length">
   <b><a href="#quirky-length">#quirky-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quirky-length">3.2. The unitless length quirk</a> <a href="#ref-for-quirky-length①">(2)</a> <a href="#ref-for-quirky-length②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quirky-length-value">
   <b><a href="#quirky-length-value">#quirky-length-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quirky-length-value">3.2. The unitless length quirk</a> <a href="#ref-for-quirky-length-value①">(2)</a> <a href="#ref-for-quirky-length-value②">(3)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>